<template>
    <div class="row product-list">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>个人信息</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <el-form :inline="true" :model="formData" class="demo-form-inline" size="medium" :rules="rules"
                             ref="ruleForm">
                        <el-row>
                            <el-col :span="8" :offset="4">
                                <el-form-item label="旧密码" :label-width="formLabelWidth" prop="oldPass">
                                    <el-input type="password" v-model="formData.oldPass" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" :offset="4">
                                <el-form-item label="新密码" :label-width="formLabelWidth" prop="pass">
                                    <el-input type="password" v-model="formData.pass" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" :offset="4">
                                <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass">
                                    <el-input type="password" v-model="formData.checkPass"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6" :offset="4">
                                <div class="" style="float: right;margin-right: 20px">
                                    <a class="revision-btn" href="javaScript:void(0)" @click="onSubmitForm">保存</a>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'resetPwd',
        components: {},
        data() {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    if (this.formData.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            const validateCheckPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入确认密码'));
                } else if (value !== this.formData.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                formLabelWidth: '120px',
                formData: {
                    oldPass: '',
                    pass: '',
                    checkPass: ''
                },
                rules: {
                    oldPass: [
                        {required: true, message: '请输入旧密码', trigger: 'blur'}
                    ],
                    pass: [
                        {required: true, validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {required: true, validator: validateCheckPass, trigger: 'blur'}
                    ],
                },
                data: {},
            }
        },
        mounted: function () {
        },
        methods: {
            async resetPwd() {
                let res = await this.$api.post('/sys/user/password?password=' + this.formData.oldPass + '&newPassword=' + this.formData.checkPass, {});
                if (res.code === 0) {
                    this.$message.success('修改成功，请重新登录');
                    this.formData = this.$options.data().formData;
                    this.userLogout();
                } else {
                    this.$message.error(res.msg);
                }
            },
            onSubmitForm() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.resetPwd();
                    } else {
                        return false;
                    }
                });
            },
            async userLogout() {
                let res = await this.$api.put('/sys/logout', {});
                if (res.code === 0) {
                    this.$delCookie('token');
                    this.$router.push({path: '/login'});
                } else {
                    this.$message.error(res.msg);
                }
            },
        }
    }
</script>

<style scoped>
    .product-list .content-wrapper /deep/ .el-form-item__label {
        color: #666;
        font-size: 12px;
    }
</style>
